//弹框中商品展示
import CommonTable from '@/components/CommonTable';
import SubTitle from '@/views/components/SubTitle';
import { Space, Button, Input } from 'antd';
import { useRef, useState } from 'react';
import { SearchOutlined } from '@ant-design/icons';
import { getOrderData } from '../../services';
import moment from 'moment';
import { ORDER_STATUS } from '../../config/enum';


const OrderListTable = (props) => {

	//查询订单信息
	const { scene, createType, setLoading, setGoodsList, changeCreateType, setOrderInfo } = props;

	const inputRef = useRef(null);

	//订单信息
	const [orderData, setOrderData] = useState({});

	const columns = [
		{
			title: "序号",
			dataIndex: "dataIndex",
			width: 60,
			render(v, r, i) {
				return i + 1;
			}
		},
		{
			title: '系统单号',
			dataIndex: 'sn',
			width: 150,
		},
		{
			title: '店铺订单号',
			dataIndex: 'age',
			width: 150,
			render: (t, r) => {
				const outOrderSn = [...new Set(r['orderGoodsList']?.map(k => k['outOrderSn']).filter(Boolean) || [])];
				return outOrderSn.join('\n');
			}
		},
		{
			title: '系统支付时间',
			dataIndex: 'payTime',
			width: 150,
			render: t => {
				return t ? moment(t).format('YYYY-MM-DD HH:mm:ss') : t;
			}
		},
		{
			title: '订单状态',
			dataIndex: 'state',
			width: 120,
			render: t => {
				return ORDER_STATUS[t];
			}
		},
		{
			title: '快递公司',
			dataIndex: 'logisticsList',
			width: 120,
			render: t => {
				return (
					t.map((v, index) => {
						return (
							<div key={index}>{v.logisticsCompanyName}</div>
						)
					})
				)
			}
		},
		{
			title: '订单金额',
			dataIndex: 'totalAmount',
			width: 120,
			render: t => t ? '¥' + t : t
		},
		{
			title: '收件人信息',
			dataIndex: 'orderDeliveryInfoList',
			width: 120,
			render: t => {
				return (
					t.map((v, index) => {
						const obj = v || {};
						return (
							<div key={index}>
								{`${obj.name} ${obj.phone} ${obj.province} ${obj.city} ${obj.district} ${obj.address}`}
							</div>
						)
					})
				)
			}
		},
		{
			title: '商品编码*数量',
			dataIndex: 'orderGoodsList',
			width: 120,
			render: t => {
				const totalNum = t.reduce((pre, next) => pre + next.goodsNum, 0)
				return (
					<div style={{ color: '#0068FF'}}>
						{totalNum}，
						{
								t.map((v, index) => {
									return (
										<span key={index} >{v.sysSkuCode} * {v.goodsNum}; </span>
									)
								})
						}
					</div>
				)
			}
		},
		{
			title: '下单店铺',
			dataIndex: 'ecStoreName',
			width: 120,
		},
		{
			title: '平台付款时间',
			dataIndex: 'ecPayTime',
			width: 150,
			render: t => {
				return t ? moment(t).format('YYYY-MM-DD HH:mm:ss') : t;
			}
		},
		{
			title: '所属仓库',
			dataIndex: 'warehouseName',
			width: 120,
		},
	];

	//格式化数据
	const handleFormatData = (data) => {
		const obj = {
			outOrderSn: data.orderGoodsList[0]?.outOrderSn,
			ecStoreId: data.ecStoreId,
			ecStoreName: data.ecStoreName,
			orderId: data.id,
			orderSn: data.sn,
			buyerNickName: data.buyerNickName,
            orderChannel: data.orderChannel
		}
		const arr = [];
		data.orderGoodsList.map(v => {
			arr.push({
				ecGoodsImage: v.goodsImage,
				ecGoodsName: v.goodsName,
				ecGoodsPrice: v.goodsPrice,
				ecGoodsSpec: v.goodsSpec,
				ecSkuId: v.skuId,
				ecSpuId: v.spuId,
				goodsImage: v.sysGoodsImage,
				goodsName: v.sysGoodsName,
				goodsNum: v.goodsNum,
				goodsPrice: v.sysGoodsPrice,
				goodsSpec: v.sysGoodsSpec,
				//id: v.id,
				orderGoodsId: v.id,
				outGoodsSn: v.outGoodsSn,
				// outStoreSku: ,
				refundedNum: v.refundedNum,
				skuCode: v.sysSkuCode,
				skuId: v.sysGoodsId,
				spuCode: v.sysSpuCode,
				spuId: v.sysSpuId,
				storeName: v.storeName,
				storeId: v.storeId,
			})
		})
		obj.goodsList = arr;
		if(scene != 'unInfoClaim') {
			setGoodsList(arr);
		}
		setOrderInfo(obj);
	}

	//查询订单信息
	const queryOrderList = async () => {
		const val = inputRef.current.input.value;
		if (!val) {
			return;
		}
		setLoading(true);
		const { success, data } = await getOrderData({
			orderSn: val
		})
		if (success) {
			setOrderData(data);
			handleFormatData(data);
		}
		setLoading(false)
	}

	const TableProps = {
		data: orderData.id ? [orderData] : [],
		columns,
		scroll: {
			x: 1500
		}
	}

	return (
		<>
			<SubTitle wrapStyle={{ marginBottom: '20px' }} symbol as="s2" title="订单信息" />
			<Space style={{ marginBottom: '16px' }}>
				<Input ref={inputRef} placeholder="系统订单号" />
				<Button type="primary" onClick={queryOrderList} icon={<SearchOutlined />}>查询</Button>
				{(createType == 'normal' && scene != 'unInfoClaim') && <Button onClick={changeCreateType}>创建无信息件售后单</Button>}
			</Space>
			<CommonTable {...TableProps} />
		</>
	)
}

export default OrderListTable;